// ### 全局变量
// let cat_id = getQueryVariable("cat_id");

// ### 分类筛选
// 1 清空原来的数据
$(".filter .condition").text("");
// 2 发送请求
$.get(
  "/api/waimai/cate.jsp",
  { cat_id },
  (res) => {
    // 2.1 发送请求 - 遍历数据
    $.each(res.data, (index, item) => {
      // 2.1 发送请求 - 追加到页面
      // 子
      let sonHtml = ``;
      $.each(item.attr_value.split(","), (sonIndex, sonItem) => {
        if (item.attr_name === "分类") {
          sonHtml += `<li> <a id="${
            item.attr_id.split(",")[sonIndex]
          }" href="javascript:;">${sonItem}</a> </li>`;
        } else {
          sonHtml += `<li> <a href="javascript:;">${sonItem}</a> </li>`;
        }
      });
      // 父
      let html = `
      <div class="cont clear">
        <div class="classification">${item.attr_name}</div>
        <div class="all on">全部</div>
        <ul class="more clear">
          ${sonHtml}
        </ul>
      </div>`;
      // 追加
      $(".filter .condition").append(html);
    });
  },
  "json"
);

// ### 门店列表
getStoreFn();
// ### 后续点击筛选
$(".filter").on("click", "a", function () {
  getStoreFn();
});
$(".filter").on("click", ".all", function () {
  getStoreFn();
});
// ### 后续点击排序
$(".tags a").click(function () {
  let text = $(this).text();
  let textObj = {
    评分最高: "comment",
    销量最高: "sell",
    ",距离最近": "location",
  };
  // order = textObj.text
  order = textObj[text];
  // console.log(text);
  // 【可选】排序规则，评分最高-传comment， 销量最高-传sell ，距离最近-传location
  getStoreFn();
});

// ### 门店列表数据获取函数
function getStoreFn() {
  // 1 清空
  $(".store").text("");
  // 2 请求接口拿数据（列表）
  $.get(
    "/api/waimai/store.jsp",
    {
      pageno: 1,
      pagesize: 10, // 数据库目前总共3条
      cat_id,
      cat_id: cat_id, // 必须传，后端根据当前分类编号获取所有自己的&子分类
      area_id,
      lat, // 纬度
      lng, // 经度
      attr: attr.join(","),
      order,
    },
    (res) => {
      // 一、 门店列表
      // 1.1 遍历
      $.each(res.data.list, (index, item) => {
        // 脚下留心：一般data是数组但是遇到有分页的就是对象
        // 数据计算
        let comment = parseInt(
          (item.comment_good_count / item.comment_count) * 100
        );
        let distance = getDistance(item.lng, item.lat);
        // let tags = []
        // item.tags.split(',').forEach(item => {
        //   tags.push(`#${item}# &nbsp;`)
        // })
        let tags = item.tags.split(",").map((item) => {
          return `#${item}# &nbsp;`;
        });
        // 先定义变量存放html
        let html = `<li class="clear btm" data-ad="" lng="${item.lng}" lat="${
          item.lat
        }">
          <div class="img">
            <a href="./waimai-detail.html?store_id=${item.id}">
              <div class="fl-count">1</div>
              <div class="imgbox">
                <img src="http://tmp00001.zhaodashen.cn/${
                  item.img
                }?imageView2/1/w/200/h/140/format/jpg/q/75|watermark/2/text/5Y2D6ZSL56We6b6Z5pWZ5Li7/font/5a6L5L2T/fontsize/240/fill/I0ZGRkZGRg==/dissolve/41/gravity/South/dx/10/dy/10">
              </div>
            </a>
          </div>
          <div class="info">
            <a href="./waimai-detail.html?store_id=${item.id}11-">
              <h4>${item.title}</h4>
              <div class="source clear">
                <div class="star-cont">
                  <ul class="stars-ul">
                    <li><i class="iconfont icon-pingfen"></i></li>
                    <li><i class="iconfont icon-pingfen"></i></li>
                    <li><i class="iconfont icon-pingfen"></i></li>
                    <li><i class="iconfont icon-pingfen"></i></li>
                    <li><i class="iconfont icon-pingfen"></i></li>
                  </ul>
                  <ul class="stars-ul stars-light" style="width: ${comment}px;">
                    <li><i class="iconfont icon-pingfen"></i></li>
                    <li><i class="iconfont icon-pingfen"></i></li>
                    <li><i class="iconfont icon-pingfen"></i></li>
                    <li><i class="iconfont icon-pingfen"></i></li>
                    <li><i class="iconfont icon-pingfen"></i></li>
                  </ul>
                </div>
                <p> ${comment}分<span>${item.comment_count}条评论</span> </p>
              </div>
              <p class="desc">
                ${item.address}
                <span>起送￥${item.start_price}、夜间配送￥${
          item.send_price
        }、人均￥${item.avg_price}、${distance}</span>
              </p>
              <div class="other"></div> 
              <span>${tags.join("")} </span>
            </a> 
          </div>
        </li>`;
        // 1.2 追加
        $(".store").append(html);
      });
      // 二、 腾讯地图打点
      createMapFn(res.data.list);
      // 三、 门店分页
    },
    "json"
  );
}
